<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">

		<!--引入本地 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<title>缴费机充值</title>
	</head>
	<body>
		<div id="app">
			<h2>{{formdata.zdmc}}</h2>
			<div class="contents">
				<label >表具号：</label>
				<p>{{formdata.kbh}}</p>
			</div>
			<div class="contents">
				<label >姓名：</label>
				<p>{{formdata.khmc}}</p>
			</div>
			<div class="contents">
				<label >下单时间：</label>
				<p>{{formdata.xdsj}}</p>
			</div>

			<div class="contents">
				<label >充值金额：</label>
				<p>{{formdata.fee}}</p>
			</div>



			<div class="btns">
				<button class="btn" style="width: 300px;" @click="chongzhi">确认支付</button>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				formdata:{},
				fee:"100",
				parmsData:{},
				local_url :"",
			},
			created() {
				localStorage.setItem("user", JSON.stringify({"org_id":"hetianjiangrun"}));
				this.parmsData = getParams();
				this.local_url = encodeURI("/admin/html/module/hetianjiangrun/html/children/payRechargeJiaofeiJi.html?ddbh="+this.parmsData.ddbh);
				this.loginOpenid();
				this.loadData();
			},
			methods: {
				//登录
				async loginOpenid(){
					this.parmsData = getParams();
					if(this.parmsData.code != "" && this.parmsData.code != undefined){
						const res = await postWebCustom(getTableId("1922"),{code:this.parmsData.code});
						if(res.code == 0){
							this.$message(res.msg);
							return;
						}
						if(res.data.openid){
							localStorage.setItem("token",res.data.openid);
							this.initWxConfig();
						}
					}else {
						let token = localStorage.getItem("token");
						let url = wwwurl+this.local_url;
						window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7694329543afd764&redirect_uri="+url+"&response_type=code&scope=snsapi_base&#wechat_redirect";
					}

				},
				//调用微信接口初始化
				async initWxConfig(){
					let index = loading(this);
					const res = await postWebCustom(getTableId("1930"),{url:wwwurl+this.local_url});
					index.close();
					if(res.code == 0){
						this.$message(res.msg);
						return;
					}
					wx.config({
						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appid, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.noncestr, // 必填，生成签名的随机串
						signature: res.data.signature,// 必填，签名
						jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
					});
				},
				async chongzhi(){
					const res = await postWebCustom(getTableId("3889"),{ddbh:""+this.parmsData.ddbh});
					if(res.code == 0){
						this.$message(res.msg);
						return;
					}
					WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId":res.data.appId,     //公众号ID，由商户传入
								"timeStamp":res.data.timeStamp,         //时间戳，自1970年以来的秒数
								"nonceStr":res.data.nonceStr, //随机串
								"package":res.data.package,
								"signType":"MD5",         //微信签名方式：
								"paySign":res.data.sign //微信签名
							},
							function(res){
								if(res.err_msg == "get_brand_wcpay_request:ok" ){
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									window.location.href = "/admin/html/module/hetianjiangrun/html/indexfwdt.html";
								}
							});
				},
				async loadData(){
					const res = await postWebCustom(getTableId("3888"),{"ddbh":this.parmsData.ddbh});
					this.formdata = res.data;
				},
			},

		})
	</script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 10px;
		}

		#app {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.contents {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(1, 80px 1fr);
		}

		.contents label {
			width: 80px;
			line-height: 45px;
			/* text-align: right; */
		}

		.contents p {
			line-height: 14px;
		}

		.contents input {
			width: 100%;
			height: 45px;
			padding: 10px;
			border-color: #ddd;
			border-radius: 8px;
			border-style: solid;
			outline: none;
			font-size: 16px;
		}

		.contents .input {
			border: none;
		}

		.btns {
			display: flex;
			justify-content: center;
			margin-top: 40px;
		}

		.btn {
			background-color: #409eff;
			color: #fff;
			margin: 0 20px;
			padding: 10px 30px;
			border: none;
			border-radius: 4px;
		}
	</style>
</html>
